<template>
  <view class="couponGivetoConfirm">
    <view class="give_box">
      <view class="txt">您将要转赠:</view>
      <view class="money">￥{{ payInfo.money }}</view>
      <view class="txt_bold">共<text style="color: #f9be52;">{{ payInfo.num }}</text>张券</view>
    </view>

    <view class="giveInfo">
      <view class="title">请填写转赠信息:</view>
      <input class="phone" type="number" bindinput="inputPhone" :focus="focusPhone" placeholder="手机号">
      <view class="memo-box">
        <textarea class="memo" value="" bindinput="inputMemo" :maxlength="noteMaxLen" placeholder="请填写赠与寄语" />
        <text class="memo-tip"><text :style="'color: '+ (currentNoteLen>=noteMaxLen ? '#f9be52' : '') + ';'">{{ currentNoteLen|0 }}</text>/{{ noteMaxLen }}个字</text>
      </view>
    </view>

    <button class="page-body-button" bindtap="givenConfirm">确认转赠</button>
    <!-- <view class="page-body-button" bindtap='givenConfirm'>
        <text>确认转赠</text>
    </view> -->
    <view class="instruction">
      <view class="explain">转赠说明</view>
      <view><text>转赠是将您账户中多领到的券赠送给您的亲朋好友，只需要他是我们超市的会员，填写手机号就可以将券免费赠送给他。</text></view>
    </view>
  </view>
</template>
<script>
const util = require('@/utils/util.js')
import { pointsCouponGiven } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      payInfo: {
        money: 0.00,
        num: 0,
        data: []
      },
      phone: '',
      focusPhone: false,
      memo: '',
      focusMemo: false,
      currentNoteLen: 0,
      noteMaxLen: 40
    }
  },
  computed: {
    userInfo() {
      return this.store.getters.userInfo
    }
  },
  onLoad(options) {
    this.payInfo = JSON.parse(options.item)
  },
  onReachBottom() {
  },

  methods: {
    inputPhone(e) {
      this.phone = e.detail.value
    },
    inputMemo(e) {
      var memo = e.detail.value
      this.memo = memo
      this.currentNoteLen = parseInt(memo.length)
    },
    givenConfirm: function() {
      var that = this
      if (!that.phone) {
        util.Tips({
          title: '需要填写手机号'
        })
        that.focusPhone = true
        return
      }
      if (that.payInfo.data.length === 0) {
        return
      }
      wx.showLoading({
        title: '转赠卡券...'
      })
      const givenCouponNumber = that.payInfo.data.map(coupon => { return coupon.id }).join(',')
      pointsCouponGiven({
        cardNoOfTransferor: that.userInfo.cardNo, // 转赠的会员卡号
        givenCouponNumber: givenCouponNumber, // 券号
        receiverPhone: that.phone // 接收人手机号码
      }).then(res => {
        console.info('转赠卡券返回:', res)
        if (!res) {
          return wx.hideLoading()
        }
        wx.hideLoading()
        util.Open('提示', '转赠成功', function() {
          util.bak()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.couponGivetoConfirm {
  min-height: 100%;
  flex: 1;
  font-size: 32rpx;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
  overflow: hidden;
}

.give_box {
  text-align: center;
  margin: 40rpx 0 80rpx 0;
}

.txt {
  font-family: Courier, Calibri, '黑体';
  font-size: 38rpx;
  letter-spacing: 2rpx;
}

.money {
  font-weight: 600;
  font-size: 54rpx;
  letter-spacing: 2rpx;
  color: #f9be52;
  line-height: 70rpx;
}

.txt_bold {
  font-family: Courier, Calibri, '黑体';
  font-weight: 600;
  font-size: 42rpx;
  letter-spacing: 2rpx;
}

.giveInfo {
  margin: 0 40rpx;
}

.giveInfo .title {
  font-family: Courier, Calibri, '黑体';
  font-weight: 600;
  font-size: 32rpx;
  letter-spacing: 2rpx;
}

.phone {
  border-bottom: 2rpx solid #d5d5d5;
  font-family: Courier, Calibri, '黑体';
  font-weight: 500;
  font-size: 32rpx;
  height: 100rpx;
  letter-spacing: 4rpx;
}
.memo-box {
  position: relative;
}
.memo {
  border-bottom: 2rpx solid #d5d5d5;
  font-family: Courier, Calibri, '黑体';
  font-size: 32rpx;
  height: 200rpx;
  letter-spacing: 4rpx;
  padding-top: 20rpx;
  width: 100%;
}
.memo-tip {
  position: absolute;
  font-size: 24rpx;
  color: #999999;
  right: 0;
  bottom: 0;
}
.page-body-button {
  margin-top: 60rpx;
  margin-bottom: 60rpx;
  border-radius: 40rpx;
  color: #f9be52;
  background-color: #2b2b2b;
  border-color: white;
  width: 80%;
}

.instruction {
  padding: 0 40rpx;
}

.instruction .explain {
  font-size: 32rpx;
  font-family: Courier, Calibri, '黑体';
  font-weight: 600;
  letter-spacing: 2rpx;
}

.instruction text {
  opacity: 0.5;
  font-size: 22rpx;
  font-family: Courier, Calibri, '黑体';
  font-weight: 500;
  text-align: left;
  color: #000000;
}
</style>
